<template>
  <div class="hello">
    一起学习axios
  </div>
</template>

<script>

  import axios from 'axios'
  import queryString from 'queryString'

  var HTTP = axios.create({
    baseURL:'http://easy-mock.com/mock/59cf334bc5c4302238f63f08',
    timeout: 1000,
    responseType:'json',//配置响应数据的格式
    headers:{
      'custome-header': 'miaov',
      'content-type':'application/x-www-form-urlencoded'//设置请求类型，让post方式支持get一样的查询字符串的格式
    }
  })

  export default {

    name: 'hello',

    created(){
      var interceptorReq=HTTP.interceptors.request.use(function (config){

        //拦截请求实例中的config对象，并做一些处理
        console.log(" 拦截请求")
        console.log(config)

        return config;

      },function (error){

        return Promise.reject(error);
      })

      //取消对请求的拦截
      HTTP.interceptors.request.reject(interceptorReq);


      HTTP.interceptors.response.use(function (response){

        //拦截响应
        console.log(response.data);

        return response;

      },function (error){

        return Promise.reject(error);
      })


      //并发请求
      function http1(){
        return HTTP.get('test-axios');
      };

      function http2(){
        return HTTP.post('test-post-mock');
      };
      //参数是一个数组，里面是多个http请求，只有多个http请求都成功之后再返回数据
      axios.all([http1(),http2()])
        .then(axios.spread((res1,res2)=>{
            console.log(res1);
            console.log(res2);
    }))
    .catch((error) =>{
        console.log(error)
    })
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .hello {
    font-size: 30px;
  }
</style>

